<script setup>
name: 'login'
import { ref, reactive } from 'vue'
import {useUserStore} from '@/stores/userStore'
import { ElMessage } from 'element-plus';
import {useRouter} from 'vue-router'

const loginForm = ref({
    username: '',
    password: ''
})
// 验证规则
const rules = reactive({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
    ]
})

// 重置表单
const loginRef = ref(null)
const resetFieldsLogin = ()=>{
    loginRef.value.resetFields()
}

const userStore = useUserStore()
const router = useRouter()

// 登录
const doLogin = () =>{
    loginRef.value.validate(async (valid)=>{
        if(valid){
            await userStore.login(loginForm.value)
            ElMessage.success('登录成功！')
            router.replace('/home')
        }
    })
}

</script>

<template>
    <div class="login_container">
        <div class="login_box">
            <!-- Logo -->
            <div class="login_logo">
                <img src="@/assets/vue.svg" alt="">
            </div>
            <!-- 登录表单 -->
            <el-form size="large" :model="loginForm" :rules="rules" ref="loginRef">
                <el-form-item prop="username">
                    <el-input prefix-icon="User" v-model="loginForm.username" />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input prefix-icon="Lock" v-model="loginForm.password" show-password />
                </el-form-item>
                <el-form-item class="login_btn">
                    <el-button type="primary" @click="doLogin">登录</el-button>
                    <el-button type="info" @click="resetFieldsLogin">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.login_container {
    height: 100%;
    background-color: #2b4b6b;

    .login_box {
        width: 450px;
        height: 300px;
        background-color: #ffffff;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;

        .login_logo {
            width: 130px;
            height: 130px;
            border-radius: 90px;
            padding: 10px;
            box-shadow: 0 0 10px #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;
            background-color: #ffffff;

            img {
                width: 100%;
                height: 100%;
                background-color: #eeeeee;
                border-radius: 50%;
            }
        }

        .el-form {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;

            .login_btn {
                padding-left: 60%;
            }
        }
    }
}
</style>